<template>
    <div id="fenye">
        <table align="center">
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>手机号</td>
                <td>年龄</td>
            </tr>
             <tr v-for="i in items" :key="i.id">
                <td>{{i.id}}</td>
                <td>{{i.name}}</td>
                <td>{{i.phone}}</td>
                <td>{{i.age}}</td>
            </tr>
        </table>
        <p>
            <button @click="shouye_page()">首页</button>
            <button @click="shang_page()">上一页</button>
            <button v-for="p in page_list" :key="p" @click="get_page(p)">{{p}}</button>
            <button @click="xia_page()">下一页</button>
            <button @click="weiye_page()">尾页</button>
        </p>
    </div>
</template>
<script>
import {fenye_zhanshi}  from './axios_api/api.js'
export default {
    name:"fenye",
    data(){
        return{
            page_list:[],
            items:[],
            all_page:"",
            p:1
        }
    },
    methods: {
        get_info(){
            var data={"page":this.p}
            console.log(data)
            fenye_zhanshi(data).
            then(res=>{
                console.log(res.data)
                this.page_list = res.data.page_list
                this.items = res.data
                this.all_page = res.data.all_page
            })
        },
        get_page(p){
            console.log(p)
            this.p=p
            this.get_info()
        },
        shouye_page(){
            this.p=1
            this.get_info()
        },
        shang_page(){
            if(this.p>1){
                this.p-=1
                this.get_info()
            }else{
                this.p=1
                this.get_info()
            }
        },
        xia_page(){
            if(this.p>=this.all_page){
                this.p=this.all_page
                this.get_info()
            }else{
                this.p+=1
                this.get_info()
            }
        },
        weiye_page(){
            this.p = this.all_page
            this.get_info()
        },

    },
    created(){
        this.get_info()
    }
}
</script>
<style>

</style>